<template>
    <div class="container">
        <div class="container">
            <img :src="modelCrop.img" alt="" class="header-img">
            <div class="header-message">
                <div class="header-title">{{modelCrop.name}}</div>
                <div class="header-xx">所属分类：{{parentName[0]}}/{{parentName[1]}}</div>
                <div class="header-xx">作物编码：{{modelCrop.code}}</div>
                <div class="header-xx">别称：{{modelCrop.otherName}}</div>
            </div>
        </div>
        <div class="lu hnk"></div><div class="hnk jgxx">生育期</div>
        <div class="dutiao">
            <div class="dutiao-include" v-for="(item,index) in birthlist" :key="index" :style="'width:' + item.day/str*100 + '%;'+'background:'+item.sort+';'">
                <div class="dutiao-hint">
                    <div>
                        {{item.name}}
                    </div>
                    <div>
                        {{item.day}}天
                    </div>
                </div>
            </div>
        </div>
        <div style="margin-top:50px;" class="lu hnk"></div><div class="hnk jgxx">产出物</div>
        <div class="jgcontainer">
            <el-table
                :data="crops"
                style="width: 100%;margin-top:20px;">
                <el-table-column prop="name" label="产出物名称">

                </el-table-column>
                <el-table-column prop="position" label="部位">

                </el-table-column>
                <el-table-column
                    prop="img"
                    label="图片">
                    <template slot-scope="scope">
                        <img :src="scope.row.img" alt="" style="width:36px;height:36px;">
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-row style='margin-top: 40px'>
            <el-col :span="24">
                <div class="lu hnk"></div><div class="hnk jgxx">绑定农事任务</div>
                <br/>
                <el-select style='margin-top: 20px' multiple v-model='taskValue' placeholder="请选择" @change="saveTask">
                    <el-option
                        v-for="item in taskList"
                        :key="item.id"
                        :label="item.type"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <div align="center">
            <el-button type="success" style="margin:50px auto;" @click ="back">返回</el-button>

        </div>

    </div>
</template>

<script>
import { model_crop_load, model_crop_delete, getPlantOperationTypeList, bindPlantOperationType } from '@/request/api';
    export default {
        data(){
            return{
                taskValue:[],
                taskList:[],
                alllist:'',
                birthlist:[],
                str:0,
				modelCrop:{},
				crops:[],
				parentName:[]
				// birthlist:[]
            }
        },
        mounted(){
            const _this = this;
            this.id = _this.$route.query.id
            this.getshuju()
            this.getPlantTaskList()
        },
        computed:{

        },
        methods:{
            //在该基原下绑定农事任务
            async saveTask(v){
                let types = ''
                let ids = ''
                this.taskValue.forEach((item,index)=>{
                    ids += item+','
                    types += this.taskList[index].type+','
                })
                types = types.slice(0,types.length-1)
                ids = ids.slice(0,ids.length-1)
                let params = {
                    modelId:this.id,
                    farmTypeNameStr:types,
                    farmTypeIdeStr:ids,

                }
                const res = await bindPlantOperationType(params)
                if(res.code == 200){
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                }
            },
            //查询所有配置的农事任务
            async getPlantTaskList(){
                let params = {
                    page:1,
                    pageSize:1000,
                    state:1
                }
                const res = await getPlantOperationTypeList(params)
                if(res.code == 200){
                    this.taskList = res.data.content
                }
            },
            getshuju(){
                model_crop_load( this.id).then((res)=>{
                    this.modelCrop = res.modelCrop
                    this.modelCrop.img = this.$store.state.plantImg + this.modelCrop.img
                    this.taskValue = this.modelCrop.farmTypeId ? this.modelCrop.farmTypeId.split(','):[]
                    this.birthlist = res.births
					this.parentName = res.parentName
					this.crops = res.crops
                    this.str= 0
                    for(var i=0;i<this.birthlist.length;i++){
                        this.str +=  Number(this.birthlist[i].day)
                        let r = parseInt(0)
                        let g = 255-parseInt(255/(i+1))
                        let b = parseInt(0)
                        var bgcolor = 'rgba('+r+','+g+','+b+','+0.7+')'
                        this.birthlist[i].sort = bgcolor
                    }
                    for(var s=0;s<this.crops.length;s++){
                        this.crops[s].img = this.$store.state.plantImg + this.crops[s].img
                    }
                })

            },
            back(){
                this.$router.go(-1)
            }
        }
    }
</script>

<style lang='less' scoped>
@import "@/assets/css/common.less";
.background{
    background: #ffffff;;
}
.dutiao{
    height:10px;
    width:90%;
    margin:30px auto;
}
.container{
    position: relative;
}
.header-img{
    width:100px;
    height:100px;
}
.header-message{
    position:absolute;
    top:35px;
    left:150px;
}
.header-title{
    font-weight:600;
    height:20px;
    line-height:20px;
}
.header-xx{
    font-size:12px;
    height:25px;
    line-height:25px;
}
.lu{
    width: 8px;
    height: 16px;
    margin-top:20px;
    background: greenyellow;
}
.hnk{
    display:inline-block;
}
.jgxx{
    margin-left:10px ;
    font-weight:600;
    font-size: 15px;
}
.dutiao-include{
    height:10px;
    display:inline-block;
    text-align: center;
    position: relative;
}
.dutiao-hint{
    position: absolute;;
    font-size:14px;
    width:50px;
    left: 30%;
    top:20px;
    border: 1px solid #333;
    border-radius:5px;
    padding: 5px;
}
</style>
